<template>
  <one-data-com :get-data-fun="getDataFunc" @data="souceFunc">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
    </el-form>
    自定义数据只需要写自己的对应from表单就可以
  </one-data-com>
</template>

<script lang="ts">
  import OneDataCom from '@/components/data/oneData/index.vue'
  import { Vue, Component } from 'vue-property-decorator'
  import YBPopView from "@/utils/popView";

  @Component({
    components: {
      OneDataCom
    }
  })
  export default class DemoForm extends Vue {

    form = {
      name: '',
      age: ''
    }

    souceFunc(data: string) {
      try {
        const jsonData = data ? JSON.parse(data) : {}
        Object.assign(this.form, {
          ...jsonData
        })
      } catch (e) {
        YBPopView.msgError('JSON 解析失败')
      }
    }

    getDataFunc() {
      return this.form
    }
  }

</script>

<style lang="scss">
  .jsoneditor-dom {
    .jsoneditor {
      height: calc(100vh - 210px);
    }
  }
</style>
